<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Demo</title>
    <link rel="icon" href="https://gitee.com/daierg/picbed/raw/master/uPic/favicon.ico">
    <link rel="Bookmark" type="image/x-icon" href="https://gitee.com/daierg/picbed/raw/master/uPic/favicon.ico" />
    <!-- <link rel="stylesheet" href="style.css"> -->
    <link rel="stylesheet" href="https://gitee.com/daierg/stylelist/blob/master/style.css">
</head>

<body>

    <div class="tabs">
        <nav>
            <a href="javascript:;" data-cont="primary" class="active">大探icon效果示意</a>
            <a href="javascript:;" data-cont="middle">探空icon效果示意</a>
            <a href="javascript:;" data-cont="hign">tab3</a>
            <a href="javascript:;" data-cont="university">tab4</a>
            <a href="javascript:;" data-cont="boshi">tab5</a>
        </nav>
        <section class="cont" id="primary">
            <div class="box">
                <button class="btn_light">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button stop">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="button btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px"
                        height="24px" viewBox="0 0 24 24" version="1.1">
                        <title>icon_chose_file_blue</title>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Icon-配色" transform="translate(-301.000000, -144.000000)" fill="#1578FD"
                                fill-rule="nonzero">
                                <g id="浅色---默认" transform="translate(155.000000, 131.000000)">
                                    <g id="选择文件" transform="translate(146.000000, 13.000000)">
                                        <path
                                            d="M18.2510484,17.373591 C18.2510484,17.9039184 17.8015096,18.3333333 17.2513279,18.3333333 L4.7492312,18.3333333 L6.50041935,10.4127751 C6.50041935,9.88244767 6.94548504,9.45303274 7.49790327,9.45303274 L19.0002796,9.45303274 C19.5526978,9.45303274 20,9.88244767 20,10.4127751 L18.2510484,17.373591 Z M6.74867207,8.73161567 L18.0005591,8.73161567 L18.0005591,7.78904992 C18.0005591,7.25872249 17.5510204,6.82930757 17.0008387,6.82930757 L11.0025161,6.82930757 L11.0025161,5.95974235 C11.0025161,5.42941492 10.5552139,5 10.0027956,5 L4.99972044,5 C4.44730221,5 4,5.42941492 4,5.95974235 L4,17.373591 L5.74895164,9.6935051 C5.74895164,9.16317767 6.19849036,8.73161567 6.74867207,8.73161567 Z" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
        </section>
        <section class="cont" id="middle">
            <div class="btn_test">
                <div class="btn_area">
                    <button class="btn_cs">恢复</button>
                    <button class="btn_cs">读取历史记录</button>
                    <button class="btn_cs">坐标数据</button>
                    <button class="btn_cs">探空数据</button>
                </div>
            </div>
        </section>
        <section class="cont" id="hign">
            第三个
        </section>
        <section class="cont" id="university">
            第四个
        </section>
        <section class="cont" id="boshi">
            第五个
        </section>
    </div>
    <script>
        //需求：当用户点击某个模块的时候，给该模块添加样式，对应的内容显示出来
        //获取所有的a标签
        var navs = document.querySelectorAll("nav a");
        //先显示一部分内容（H5标签选择器默认选每一类标签的第一个）
        document.querySelector("section").style.display = "block";
        //遍历该数组
        for (var i = 0; i < navs.length; i++) {
            navs[i].onclick = function () {
                //每次点击前都先清除原来的内容
                var beforeNav = document.querySelector(".active")
                var beforeId = beforeNav.dataset["cont"];
                document.querySelector("#" + beforeId).style.display = "none";
                //排他思想
                for (var j = 0; j < navs.length; j++) {
                    //先去除所有的active标签
                    navs[j].classList.remove("active");
                }
                //对应的a加样式
                this.classList.add("active");
                //获取对应的内容标签并添加样式
                var secId = this.dataset["cont"];
                document.querySelector("#" + secId).style.display = "block";
            }
        }
    </script>
</body>

</html>